<style lang="less" scoped>
.btn-grp {
  padding: 0;
}
.demo1-item {
  border: 1px solid #ececec;
  padding: 5px 15px;
}
.demo1-item-selected {
  border: 1px solid green;
}
</style>

<template>
  <div class="contain">
    <div class="transMask"
         v-if="showMask"></div>
    <app-head :show="showstate"
              :title="pagetitle"></app-head>
    <div class="car-bbinfo-card mb30">
      <div class="bbno lineb">运单号：{{data.ATVNo}}</div>
      <div class="bbmain">
        <p class="displayflex"><i>客户名称</i><label class="flex1">{{data.SaleCorpName}}</label></p>
        <p class="displayflex"><i>送货地址</i><label class="flex1">{{data.ArrivalAddress}}</label></p>
        <p class="displayflex"><i>联系人</i><label class="flex1">{{data.SendContacts}} {{data.SendContactsTel}}</label></p>
        <!-- <p class="displayflex"><i>订单总件数</i><label class="flex1">{{data.Pkgs}}件</label></p>
        <p class="displayflex"><i>提货件数</i><label class="flex1">{{data.ConPKGS}}件</label></p> -->
        <p class="displayflex"><i>交货数量</i><label class="flex1">{{TotalCounts}}</label></p>
      </div>
    </div>

    <div class="car-bbinfo-card">
      <!-- <popup-picker class="m-form-box"
                    title="差异原因"
                    :data="reasonList"
                    v-model="reason"
                    placeholder="请选择"
                    :show-name="true">
      </popup-picker> -->
      <popup-picker class="m-form-box"
                    title="差异原因"
                    :data="reasonList"
                    v-model="reason"
                    @on-change="onChange"
                    placeholder="请选择"></popup-picker>
      <div class="bbmain mb30">
        <x-textarea v-model="data.Memo"
                    :placeholder="'备注'"
                    :max="200"
                    autosize
                    style="color:#888; font-size:16px;">
        </x-textarea>
      </div>
    </div>

    <uploader :title="'交货凭证'"
              :img-list="imgListWL"
              :imgListBd='imgListBd'
              :max="max"></uploader>
    <!-- <uploader :title="'业务单据图片'" :img-list="imgListYW" :max="max"></uploader>
    <uploader :title="'发票图片'" :img-list="imgListFP" :max="max"></uploader>
    <uploader :title="'车牌号图片'" :img-list="imgListCP" :max="max"></uploader> -->
    <div id="detailBottom"
         class="detail-bottom displayflex">
      <span>
        共计：<em class="red">{{TotalCounts}}</em> 个商品
      </span>
      <div class="flex1 btn-grp">
        <div @click="$router.go(-1)"
             class="btn gray">取消</div>
        <div @click="submit()"
             class="btn">交货完成</div>
      </div>
    </div>
    <!-- <x-dialog v-model="showQrcode"
              class="qrcode-wrap">
      <div class="llse-cadd llse close"
           @click="closeQrcode"></div>
      <qrcode class="qrcode-img"
              :value="qrCodeValue"></qrcode>
      <p class="qrcode-txt">请扫二维码确认签收</p>
    </x-dialog> -->
  </div>
</template>

<script>
import appHead from '@/components/core/header/app_headbar.vue';
import uploader from '@/components/share/imageUploader/imageUploader.vue';
import tools from '../../tools/tool.js';
import { mapGetters, mapState } from 'vuex'
import { Checker, CheckerItem } from 'vux'


export default {
  components: {
    appHead,
    uploader,
    Checker,
    CheckerItem
  },
  data () {
    return {
      show1: false,
      data: {
        Tratvehicleex: [],
      },
      Memo: '',
      imgListWL: [],
      imgListYW: [],
      imgListFP: [],
      imgListCP: [],
      reasonList: [],
      imgListBd: [],
      reason: [],
      max: 9,
      leaveDate: '',
      pickerStartDate: '',
      pickerEndDate: '',
      visibility: false,
      showMask: false,
      showQrcode: false,
      qrCodeValue: '',
      value1: ['iPhone'],
      title1: '手机机型',
      list1: [['小米', 'iPhone', '华为', '情怀', '三星', '其他', '不告诉你']],

    }
  },
  watch: {
  },
  computed: {
    TotalCounts () {
      let sum = 0;
      this.data.Tratvehicleex.forEach(x => {
        sum += x.ConPKGS;
      })
      return sum;
    },
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar,
    }),
    userinfo () {
      return localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null
    }
  },
  created () {
    this.leaveDate = tools.getNow(new Date(), 'Min', 30, 'YMDHM');
    this.pickerStartDate = tools.getNow(new Date(), 'Year', -3, 'YMD');
    this.pickerEndDate = tools.getNow(new Date(), 'Year', 3, 'YMD');
    this.getData();
    this.getRefusalreasonData();
  },
  mounted () {

  },
  methods: {
    onChange (value) {
      this.reason = value;
    },
    getData () {
      if (sessionStorage.getItem('pickUpOrderData')) {
        this.data = JSON.parse(sessionStorage.getItem('pickUpOrderData'));
        console.log(this.data);
      } else {
        this.showMask = true;
        this.Toast({
          message: '未发现订单数据，请返回重试',
          duration: 1500,
        });
        setTimeout(() => { this.$router.go(-1) }, 1500);
      }
    },
    closeQrcode () {
      this.showQrcode = false;
      this.$router.push({ path: '/driver/cardeliverygrup' });
    },
    submit () {
      //let imgurla = this.$sortImage(this.imgListWL);
      let imgList = [];
      this.imgListWL.forEach((x) => {
        let item = x.split(',')[1];
        imgList.push(item);
      })
      let query = {
        degoodslist: this.data.Tratvehicleex,
        Guid: this.data.Guid,
        Memo: this.data.Memo,
        SaleCorpGUID: this.data.SaleCorpGUID,
        SaleCorpName: this.data.SaleCorpName,
        PRContactsTel: this.userinfo.MobileTel1,
        Receiver: this.userinfo.StaffID,
        ReceiverName: this.userinfo.Name,
        ArrivalAddress: this.data.ArrivalAddress,
        Volumn: this.data.Volumn,
        Weight: this.data.Weight,
        imgurla: imgList,
      }

      if (this.reason) {
        query.Reason = this.reason[0];
      }

      var _this = this;
      this.Ajax.post("HandoverConfirmGroupBF", query).then(resp => {
        if (resp.IsSuccess) {
          _this.imgListWL = [];
          _this.imgListBd = [];
          _this.Toast({
            message: "操作完成",
            duration: 1000,
          });
          this.$router.push({ path: '/driver/cardeliverygrup' });
          // setTimeout(() => {
          //   _this.qrCodeValue = _this.data.BBillNo;
          //   _this.showQrcode = true;
          // }, 1000)
        } else {
          this.Toast({
            message: resp.ErrorMessage
          });
        }
      });
    },
    sortImage () {
      let imgList = [];
      this.imgList.forEach((x) => {
        let item = x.split(',')[1];
        imgList.push(item)
      })
    },
    getRefusalreasonData: function () {
      let query = {
        TypeValue: "RefusalreasonTT"
      };
      console.log(this.list1);
      this.Ajax.post("GetDatadictionaries", query).then((res) => {
        if (res.IsSuccess) {
          if (res.Datas.length > 0) {
            var list = [];
            res.Datas.forEach(x => {
              list.push(x.DataIntroduction);
            });
            this.reasonList.push(list);
          }
        } else {
          this.Toast('出现错误，请刷新重试');
        }
      }).catch(e => {
        console.log(e);
        this.Toast('出现错误，请刷新重试');
      });
    },
  }
}
</script>
